<template>
    <view class="container">
        <intake-nav-bar title="立即认证" dark :fixed="true"  />
        <!-- 进度条 -->
        <view class="progress">
            <view class="progress-item active">
                <view class="progress-dot active">
                    <view class="progress-dot-min"></view>
                </view>
                <text class="progress-text">个人信息</text>
            </view>
            <view class="progress-item">
                <view class="progress-dot active"><view class="progress-dot-min"></view></view>
                <text class="progress-text">添加银行</text>
            </view>
            <view class="progress-item">
                <view class="progress-dot active"><view class="progress-dot-min"></view></view>
                <text class="progress-text">完成认证</text>
            </view>
            <view class="progress-line">
            </view>
            <view class="progress-line-active"></view>
        </view>
        <view class="text-content">
            您已完成认证，<br/>
            将在七个工作日之内完成审核。
        </view>

        <!-- 底部按钮 -->
        <button class="submit-btn" @click="next()">完成</button>
    </view>
</template>

<script>
export default {
  data() {
    return {
        idCardz: this.$common.imgUrl() + '/images/member/id_card_z@2x.png',
        idCardf: this.$common.imgUrl() + '/images/member/id_card_f@2x.png',
      // 您可以在这里添加更多的数据绑定
    };
  },
  methods: {
    next(){
      this.$common.navTo('/pages/users_purchasing/user_extract/index');
    }
  }
};
</script>
<style lang="scss">
.container {
    width: 100%;
    height: 100vh;
    // text-align: center;
    padding: 20px;
    background: linear-gradient(to bottom, #E3EAFB 0%, transparent 100%);
    .container {
        min-height: 100%;
        background-color: #F5F7FA;
        display: flex;
        flex-direction: column;
    }

    .header {
        height: 88rpx;
        display: flex;
        align-items: center;
        background-color: #FFFFFF;
        padding: 0 32rpx;
        position: relative;
    }

    .back-icon {
        width: 40rpx;
        height: 40rpx;
    }

    .title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: 16px;
        font-weight: 500;
        color: #333333;
    }

    .progress {
        height: 120rpx;
        // background-color: #FFFFFF;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 60rpx;
        position: relative;
    }

    .progress-line {
        width: 680rpx;
        position: absolute;
        top: 20%;
        left: 0rpx;
        right: 100rpx;
        height: 18rpx;
        background-color: #fff;
        z-index: 1;
    }
    .progress-line-active{
        position: absolute;
        top: 20%;
        left: 0rpx;
        right: 100rpx;
        height: 18rpx;
        background-color: #C3D5FE;
        width:680rpx;
        z-index: 1;
    }

    .progress-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 2;
    }

    .progress-dot {
        width: 28rpx;
        height: 28rpx;
        border-radius: 50%;
        background-color: #9EA5B3;
        margin-bottom: 16rpx;
        .progress-dot-min{
            width: 16rpx;
            height: 16rpx;
            border-radius: 50%;
            margin: 6.5rpx auto;
            background-color: #4A5A78;
        }
    }

    .progress-dot.active {
        background-color: #A0BBFC;
        .progress-dot-min{
            width: 16rpx;
            height: 16rpx;
            border-radius: 50%;
            margin: 6.5rpx auto;
            background-color: #0066FF;
        }
    }

    .progress-text {
        font-size: 14px;
        color: #666666;
    }
    .text-content{
        font-size: 32rpx;
        line-height: 50rpx;
        margin: 85rpx 32rpx;
    }


    .submit-btn {
        position: fixed;
        bottom:200rpx;
        left:100rpx;
        width: 563rpx;
        height: 96rpx;
        background-color: #0066FF;
        color: #FFFFFF;
        font-size: 16px;
        margin: 44rpx auto;
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>